<!-- components/PrincipleSidebar.vue -->
<template>
  <div class="principle-sidebar" :class="{ collapsed: isCollapsed }">
    <!-- 三级菜单 -->
    <el-menu
      :default-active="activeMenu"
      :default-openeds="openedMenus"
      :collapse="isCollapsed"
      class="principle-menu"
      @select="handleMenuSelect"
    >
      <!-- 第一个 v-for：将 key 移动到 el-sub-menu -->
      <el-sub-menu
        v-for="category in menuItems"
        :key="category.id"
        :index="category.id"
      >
        <template #title>
          <el-icon>
            <component :is="category.icon" />
          </el-icon>
          <span>{{ category.title }}</span>
        </template>

        <!-- 第二个 v-for：移除 template 上的 key，在具体元素上添加 key -->
        <template v-for="subItem in category.children">
          <!-- 二级菜单（有子菜单） -->
          <el-sub-menu
            v-if="subItem.children && subItem.children.length"
            :key="subItem.id"
            :index="subItem.id"
          >
            <template #title>
              <el-icon>
                <component :is="subItem.icon" />
              </el-icon>
              <span>{{ subItem.title }}</span>
            </template>

            <!-- 三级菜单项 -->
            <el-menu-item
              v-for="child in subItem.children"
              :key="child.id"
              :index="child.id"
            >
              <router-link
                :to="child.route || child.id"
                class="menu-link"
                @click="handleRouteClick(child.id)"
              >
                <span>{{ child.title }}</span>
              </router-link>
            </el-menu-item>
          </el-sub-menu>

          <!-- 二级菜单（没有子菜单） -->
          <el-menu-item
            v-else
            :key="'item-' + subItem.id"
            :index="subItem.id"
            style="padding-left: 20px"
          >
            <el-icon>
              <component :is="subItem.icon" />
            </el-icon>
            <template #title>
              <router-link
                :to="subItem.route || subItem.id"
                class="menu-link"
                @click="handleRouteClick(subItem.id)"
              >
                {{ subItem.title }}
              </router-link>
            </template>
          </el-menu-item>
        </template>
      </el-sub-menu>
    </el-menu>

    <!-- 底部操作区域 -->
    <div class="sidebar-footer" v-show="!isCollapsed">
      <el-tooltip content="搜索内容" placement="top">
        <el-button type="info" circle @click="handleSearch">
          <el-icon><Search /></el-icon>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { usePrincipleMenuStore } from "@/store/principle";
import { Printer, Star, Search, Expand, Fold } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

// 获取store实例
const principleStore = usePrincipleMenuStore();
const router = useRouter();

// 计算属性
const menuItems = computed(() => principleStore.menuItems);
const activeMenu = computed(() => principleStore.activeMenu);
const isCollapsed = computed(() => principleStore.isCollapsed);
const openedMenus = computed(() => principleStore.openedMenus);

// 方法
const toggleCollapse = () => {
  principleStore.toggleCollapse();
};

const handleMenuSelect = (index) => {
  principleStore.setActiveMenu(index);
  router.push(index);
};

const handleRouteClick = (id) => {
  principleStore.setActiveMenu(id);
};

// handleMenuOpen 已移除，不再需要此方法

const handlePrint = () => {
  emit("print-content", principleStore.activeContent);
};

const handleFavorite = () => {
  emit("favorite-content", principleStore.activeContent);
};

const handleSearch = () => {
  emit("search-content");
};

// 定义事件
const emit = defineEmits([
  "print-content",
  "favorite-content",
  "search-content",
]);
</script>

<style scoped>
.principle-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  border-right: 1px solid #e4e7ed;
  transition: width 0.3s ease;
}

.principle-sidebar.collapsed {
  width: 64px;
}

.principle-sidebar:not(.collapsed) {
  width: 280px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #fff;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.collapse-btn {
  color: #909399;
}

.principle-menu {
  flex: 1;
  border: none;
  background-color: transparent;
}

:deep(.el-sub-menu__title),
:deep(.el-menu-item) {
  height: 48px;
  line-height: 48px;
}

:deep(.el-menu-item) {
  font-size: 14px;
}

/* 一级菜单项 */
:deep(.el-menu > .el-sub-menu > .el-sub-menu__title) {
  padding-left: 0 !important;
}

/* 二级子菜单标题 */
:deep(.el-menu .el-sub-menu .el-sub-menu > .el-sub-menu__title) {
  padding-left: 20px !important;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid #e4e7ed;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
}

/* 菜单链接样式 */
.menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .principle-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  }

  .principle-sidebar:not(.collapsed) {
    width: 100vw;
    max-width: 320px;
  }
}
</style>